import { getCurrentInstance, onBeforeUnmount, ref, shallowRef, unref } from 'vue';
import { useRafThrottle } from '/@/utils/domUtils';
import { addResizeListener, removeResizeListener } from '/@/utils/event';
import { isDef } from '/@/utils/is';
const domSymbol = Symbol('watermark-dom');
export function useWatermark(appendEl = ref(document.body)) {
    const func = useRafThrottle(function () {
        const el = unref(appendEl);
        if (!el)
            return;
        const { clientHeight: height, clientWidth: width } = el;
        updateWatermark({ height, width });
    });
    const id = domSymbol.toString();
    const watermarkEl = shallowRef();
    const clear = () => {
        const domId = unref(watermarkEl);
        watermarkEl.value = undefined;
        const el = unref(appendEl);
        if (!el)
            return;
        domId && el.removeChild(domId);
        removeResizeListener(el, func);
    };
    function createBase64(str) {
        const can = document.createElement('canvas');
        const width = 300;
        const height = 240;
        Object.assign(can, { width, height });
        const cans = can.getContext('2d');
        if (cans) {
            cans.rotate((-20 * Math.PI) / 120);
            cans.font = '15px Vedana';
            cans.fillStyle = 'rgba(0, 0, 0, 0.15)';
            cans.textAlign = 'left';
            cans.textBaseline = 'middle';
            cans.fillText(str, width / 20, height);
        }
        return can.toDataURL('image/png');
    }
    function updateWatermark(options = {}) {
        const el = unref(watermarkEl);
        if (!el)
            return;
        if (isDef(options.width)) {
            el.style.width = `${options.width}px`;
        }
        if (isDef(options.height)) {
            el.style.height = `${options.height}px`;
        }
        if (isDef(options.str)) {
            el.style.background = `url(${createBase64(options.str)}) left top repeat`;
        }
    }
    const createWatermark = (str) => {
        if (unref(watermarkEl)) {
            updateWatermark({ str });
            return id;
        }
        const div = document.createElement('div');
        watermarkEl.value = div;
        div.id = id;
        div.style.pointerEvents = 'none';
        div.style.top = '0px';
        div.style.left = '0px';
        div.style.position = 'absolute';
        div.style.zIndex = '100000';
        const el = unref(appendEl);
        if (!el)
            return id;
        const { clientHeight: height, clientWidth: width } = el;
        updateWatermark({ str, width, height });
        el.appendChild(div);
        return id;
    };
    function setWatermark(str) {
        createWatermark(str);
        addResizeListener(document.documentElement, func);
        const instance = getCurrentInstance();
        if (instance) {
            onBeforeUnmount(() => {
                clear();
            });
        }
    }
    return { setWatermark, clear };
}
